<template>
  <el-row class="login" type="flex" align="middle" justify="center">
    <el-col :span="8" class="login-form">
      <h3>登录xxxx系统</h3>
      <el-form
        class="box-form"
        :model="formDate"
        :rules="formRules"
        ref="loginForm"
      >
        <el-form-item label="" prop="username">
          <el-input
            clearable
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
            v-model="formDate.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            show-password
            clearable
            placeholder="请输入密码"
            prefix-icon="el-icon-goods"
            v-model="formDate.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="login"
            >立即登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "",
  props: {},
  data() {
    return {
      formDate: {
        username: "admin",
        password: "123456"
      },
      // 表单验证规则对象
      formRules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {min: 4, max: 8, message: '长度在4-8之间', trigger: 'blur' }
        ],
        password:[
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min:6,message:'最少6位',trigger: 'blur'}
        ]
      }
    };
  },
  computed: {},

  created() {},

  mounted() {},

  watch: {},

  methods: {
    async login() {
      // 表单校验
      // 1.表单校验，使用表单实例的 validate方法
      try {
        await this.$refs.loginForm.validate()
      } catch (error) {
        return
      }
      // 发请求
      // localStorage.setItem('user',this.formDate)
      // this.$store.commit('setUserInfo',this.formDate)
      await this.$store.dispatch('user/loginAction',this.formDate)
      this.$message.success('登录成功')
      const url = this.$route.query.url
      console.log(url);
      // 跳转到主页面
      this.$router.replace(url || '/')
    }
  },

  components: {}
};
</script>

<style scoped lang="less">
.login {
  height: 100vh;
  background: #eee;
  .login-form {
    min-height: 320px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 4px;
    background-color: #fff;
    h3 {
      text-align: center;
      margin-top: 20px;
    }
    .box-form {
      padding: 30px 20px;
    }
    .login-btn {
      display: block;
      width: 100%;
    }
  }
}
</style>
